<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :paging-enabled="false"
    :auto-show-back-to-top="false"
    :loading-more-enabled="false"
  >
    <template #top>
      <wd-navbar 
        title="产品相关" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>
    
    <view class="px-[22rpx] pt-[24rpx] pb-[24rpx]">
      <!-- 网格布局 -->
      <view class="grid grid-cols-2 gap-[32rpx]">
        <view 
          v-for="item in dataList" 
          :key="item.id"
          class="bg-white rounded-[16rpx] p-[30rpx] box-border flex items-center justify-between h-[192rpx]"
          style="box-shadow: 2rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);"
          @click="handleSelectItem(item)"
        >
          <!-- 左侧：资料名称和点击查看 -->
          <view class="flex-1 flex flex-col justify-center h-full">
            <view>
              <text class="text-[32rpx] font-[500] text-[#333] line-clamp-2 leading-[1.3]">{{ item.title }}</text>
            </view>
            <view>
              <text class="text-[26rpx] text-[#999]">点击查看</text>
            </view>
          </view>
          <!-- 右侧：PDF图标 -->
          <view class="w-[98rpx] h-[96rpx] rounded-[12rpx]">
            <image 
              src="/src/static/images/pdf.png" 
              class="w-full h-full"
              style="margin-left: 2px;"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { documentList } from '@/api/study.js'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ProductRelated',
})

const pagingRef = ref(null)
const dataList = ref([])
// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择列表项
const handleSelectItem = (item) => {
  uni.navigateTo({
    url: `/pages-children/docView/index?url=${item.path}&file_id=${item.id}`
  })
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  documentList().then((res) => {
    pagingRef.value.complete(res)
  }).catch(() => {
    pagingRef.value.complete(false)
  })
}
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style scoped>

</style>
